<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>添加用户界面</title>
    <style type="text/css">
        html {
            box-sizing: border-box;
            font-size: 15px;
        }

        *,
        *::before,
        *::after {
            box-sizing: inherit;
        }

        body,
        h1,
        h2,
        h3 {
            margin: 0;
            padding: 0;
            font-weight: normal;
        }

        a {
            text-decoration: none;
        }

        body {
            /*背景*/
            background-color: whitesmoke;
            padding: 2rem;
            margin: 0 auto;
            font-family: tahoma;
        }

        .main {
            width: 75%;
            height: 870px;
            margin: 0 auto;
            background-color: #292d3e;
            box-shadow: 0 0 20px #292d3e;
            border-radius: 20px  20px  20px  20px;
        }

        .top {
            background-color: #222533;
            border-radius: 20px  20px 20px 20px;
        }

        .header {
            display: flex;
            justify-content: space-between;
        }

        .logo {
            padding-left: 20px;
        }

        .login {
            padding-right: 40px;
            padding-top: 20px;
        }

        .login input {
            width: 150px;
            height: 30px;
            padding: 5px;
            float: left;
            outline: none;
            border-radius: 20px  0px  20px  20px;
        }

        .login button {
            font-size: 20px;
            outline: none;
            float: left;
            background-color: #292d3e;
            border: 1px solid #292d3e;
            color: white;
            height: 50px;
            width: 140px;
            cursor: pointer;
        }

        h2 {
            color: white;
            text-align: center;
            font-size: 2rem;
            padding: 0px 0 25px;
            /* padding: 70px 0 25px; */
        }

        h3 {
            color: white;
            text-align: center;
            font-size: 1rem;
            padding-bottom: 140px;
        }

        .signup {
            width: 800px;
            height: 600px;
            margin: auto;
            background-color: #ececec;
            position: relative;
            /* top: -71px; */
            top: -120px;
            padding: 30px;

            border-radius: 18px;
        }

        .signup h4 {
            color: gray;
            font-size: 1.6rem;
        }

        .signup .field {
            margin-top: 30px;
            position: relative;
        }
        #cropedBigImg
        {
            height: 100px;
            width: 100px;
        }

        .signup input {
            display: block;
            height: 40px;
            width: 100%;
            border: none;
            outline: none;
            border-bottom: 1px solid #999;
            color: #2E2D3C;
            font-size: large;
            font-weight: bold;
            opacity: 0.5;
        }

        .signup button {
            display: block;
            width: 100%;
            outline: none;
            background-color: #4277b2;
            border: 1px solid #29487d;
            color: white;
            font-size: 1rem;
            cursor: pointer;
            padding: 10px;
        }

        .signup .label {
            position: absolute;
            pointer-events: none;
            left: 0;
            top: 0;
            transition: 0.2s ease all;
            color: #4a2f5b;
            font-size: larger;
        }

        /* .signup .label {
            position: absolute;
            pointer-events: none;
            left: 0;
            top: 0;
            transition: 0.2s ease all;
            color: #757575;
        } */

        #title{
            font-family: 幼圆;
            font-size: 60px;
            color: white;
            padding: 20px;
            margin: 0px auto;
            text-align: center;
        }
        .signup input:focus~.label,
        .signup input:not(:focus):valid~.label {
            top: -17px;
            font-size: .8rem;
            opacity: 1;
        }
    </style>

</head>

<body>
<!--<h3>输入信息</h3>-->
<!--<div th:text="${mes}" style="color: red"></div>-->
<div class="main">
    <div class="top">
        <div class="header">
            <h1 class="logo">
<!--                <a href=""><img src="/css/images/i2.png" alt=""></a>-->
                <div id="title">
                    欢迎申请及使用
                </div>
            </h1>

            <div class="login">

                <button type="submit"><a href="/toLogin" style="color: white;">去登陆</a> </button>

            </div>

        </div>

        <h2>请在下方输入相应信息</h2>
        <h3>教师编号、申请信息、请提交教师证件照片</h3>

    </div>

    <div class="signup">
        <h4>申请信息</h4>
        <form action="/user/add" method="post">
            <div class="field">
                <input type="text" required>
                <span class="label">教师编号</span>
            </div>

            <div class="field">
                <input type="text" required>
                <span class="label">您的姓名</span>
            </div>

            <div class="field">
                <input type="text" required>
                <span class="label">学院信息</span>
            </div>

            <div class="field">
                <input type="file" id="chooseImage" name="file" value="请提交教师证件" required>
                <div class="field-img">
                    <img id="cropedBigImg" value='custom' alt="暂未交教师证件" data-address='' title="自定义背景" width="90px" height="200px" />
                </div>
            </div>

            <div class="field">
                <!-- <button class="label">Sign Up</button> -->
                <button class="label" style="color: white;">提交</button>
            </div>

        </form>
    </div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/one.js"></script>
</body>

</html>